<script setup lang="ts" name="Logistics">
import { getLogisticsInfo } from '@/api/order'
import type { Logistics } from '@/types/order'
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import AMapLoader from '@amap/amap-jsapi-loader'
import startImg from '@/assets/start.png'
import endImg from '@/assets/end.png'
import carImg from '@/assets/car.png'
window._AMapSecurityConfig = {
  securityJsCode: '99240abf1188823cd88cfe635a521af3'
}
const route = useRoute()
const logisticsInfo = ref({} as Logistics)
onMounted(async () => {
  const res = await getLogisticsInfo(route.params.id as string)

  logisticsInfo.value = res.data

  // 等数据回来了，我们再显示出地图
  AMapLoader.load({
    key: 'b5a3290bb8e23f2361bcc36be9435bcd', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [''] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then(AMap => {
      const map = new AMap.Map('map', {
        //设置地图容器id
        zoom: 11, //级别
        mapStyle: 'amap://styles/whitesmoke' //设置地图的显示样式
      })

      // 绘制轨迹
      AMap.plugin('AMap.Driving', function () {
        var driving = new AMap.Driving({
          map,
          showTraffic: false, // 关闭交通状态
          hideMarkers: true // 隐藏默认的marker
        })

        // 剪切获取数组的第一个元素
        const start = logisticsInfo.value.logisticsInfo.shift()
        // 起点
        const startPoint = [start?.longitude, start?.latitude]
        // 起点的图标
        var startMarker = new AMap.Marker({
          position: new AMap.LngLat(start?.longitude, start?.latitude), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          icon: startImg,
          anchor: 'center'
        })
        map.add(startMarker)

        // 剪切获取数组的最后一个元素
        const end = logisticsInfo.value.logisticsInfo.pop()
        // 终点
        const endPoint = [end?.longitude, end?.latitude]
        // 终点的图标
        var endMarker = new AMap.Marker({
          position: new AMap.LngLat(end?.longitude, end?.latitude), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          icon: endImg,
          anchor: 'center'
        })
        map.add(endMarker)

        // 数组中剩下的两个，作为途经点
        var opts = {
          // 途经点参数，最多支持传入16个途经点
          waypoints: logisticsInfo.value.logisticsInfo.map(item => [item.longitude, item.latitude])
        }

        /**
         * 参数1：起点
         * 参数2：终点
         * 参数3：途经点（最多支持传入16个途经点）
         * 参数4：规划好之后的回调函数
         */
        driving.search(startPoint, endPoint, opts, function (status: any, result: any) {
          // 未出错时，result即是对应的路线规划方案
          // 加上车车的图标，并且以车车为中心点进行方法
          var carMarker = new AMap.Marker({
            position: new AMap.LngLat(
              res.data.currentLocationInfo.longitude,
              res.data.currentLocationInfo.latitude
            ), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            icon: carImg,
            anchor: 'center'
          })
          map.add(carMarker)

          // 3s之后，以carMarker为中心点，适当放大
          setTimeout(() => {
            map.setFitView([carMarker])
            map.setZoom(9)
          }, 3000)
        })
      })
    })
    .catch(e => {
      console.log(e)
    })
})
</script>

<template>
  <div class="order-logistics-page">
    <div id="map">
      <div class="title">
        <van-icon name="arrow-left" @click="$router.back()" />
        <span>{{ logisticsInfo.statusValue }}</span>
        <van-icon name="service" />
      </div>
      <div class="current">
        <p class="status">{{ logisticsInfo.statusValue }}</p>
        <p class="predict">
          <span>{{ logisticsInfo.name }}</span>
          <span>{{ logisticsInfo.awbNo }}</span>
        </p>
      </div>
    </div>
    <div class="logistics">
      <p class="title">物流详情</p>
      <van-steps direction="vertical" :active="0">
        <van-step v-for="item in logisticsInfo.list" :key="item.id">
          <p class="status">{{ item.statusValue }}</p>
          <p class="content">{{ item.content }}</p>
          <p class="time">{{ item.createTime }}</p>
        </van-step>
      </van-steps>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.order-logistics-page {
  --van-step-icon-size: 18px;
  --van-step-circle-size: 10px;
}
#map {
  height: 450px;
  background-color: var(--cp-bg);
  overflow: hidden;
  position: relative;
  .title {
    background-color: #fff;
    height: 46px;
    width: 355px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    font-size: 16px;
    position: absolute;
    left: 10px;
    top: 10px;
    box-sizing: border-box;
    box-shadow: 0px 0px 22px 0px rgba(229, 229, 229, 0.5);
    z-index: 999;
    > span {
      flex: 1;
      text-align: center;
    }
    .van-icon {
      font-size: 18px;
      color: #666;
      &:last-child {
        color: var(--cp-primary);
      }
    }
  }
  .current {
    height: 80px;
    border-radius: 4px;
    background-color: #fff;
    height: 80px;
    width: 355px;
    box-sizing: border-box;
    padding: 15px;
    position: absolute;
    left: 10px;
    bottom: 10px;
    box-shadow: 0px 0px 22px 0px rgba(229, 229, 229, 0.5);
    z-index: 999;
    .status {
      font-size: 15px;
      line-height: 26px;
    }
    .predict {
      color: var(--cp-tip);
      font-size: 13px;
      margin-top: 5px;
      > span {
        padding-right: 10px;
      }
    }
  }
}
.logistics {
  padding: 0 10px 20px;
  .title {
    font-size: 16px;
    padding: 15px 5px 5px;
  }
  .van-steps {
    :deep(.van-step) {
      &::after {
        display: none;
      }
    }
    .status {
      font-size: 15px;
      color: var(--cp-text3);
      margin-bottom: 4px;
    }
    .content {
      font-size: 13px;
      color: var(--cp-tip);
      margin-bottom: 4px;
    }
    .time {
      font-size: 13px;
      color: var(--cp-tag);
    }
  }
}
</style>
